<template>
  <el-container class="about-layout" style="background: #f5f5f5;">
    <el-form :model="form" :style="{'width':'100%'}">
        <el-header style="height:auto;">
            <el-row :style="{'font-size':'30px'}">
                 <el-button type="text" icon="el-icon-arrow-left" :style="{'font-size':'30px'}" @click="onBackClick"></el-button>
                 <span style="margin-left:20px;">{{namespace.name}}</span>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="环境" :label-width="formLabelWidth">
                        <el-radio-group v-model="form.profile" @change="onProfileChange">
                            <el-radio-button v-for="(profile,index) in profiles" :label="profile.name" :key="index">{{profile.name}}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :style="{'text-align':'right'}">
                    <el-form-item>
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="onSubmitClick">确 定</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-radio-group v-model="form.type" @change="onTypeChange">
              <el-radio-button label="yml" ></el-radio-button>
              <el-radio-button label="properties"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="配置" :label-width="formLabelWidth">
            <div class="json-editor">
              <codemirror
                ref="mycode"
                :value="form.source"
                :options="cmOptions"
                @input="onCodeChange"
                class="code">
              </codemirror>
            </div>
          </el-form-item>
        </el-main>
     </el-form>
  </el-container>
</template>
<style scoped>
  .el-form > .el-header{
    background-color: #FFFFFF;
  }
  .el-main > .el-row{
    margin: 10px 0;
  }
  .json-editor{
  height: 100%;
  position: relative;
}
.json-editor >>> .CodeMirror {
  height: auto;
  min-height: 300px;
}
.json-editor >>> .CodeMirror-scroll{
  min-height: 300px;
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
  color: #F08047;
}
</style>
<script>
  import { codemirror } from 'vue-codemirror'
  import "codemirror/theme/ambiance.css";  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
  require("codemirror/mode/javascript/javascript"); 
  export default {
    components:{
      codemirror
    },
    created(){
        this.form.namespaceId=this.$route.params.id
        this.$store.dispatch('namespace/detail',{id:this.$route.params.id}).then((response)=>{
            this.namespace = response
        }).catch((error)=>{
            console.log(error)
        })

        this.$store.dispatch('profile/all').then((response)=>{
            this.profiles = response
            this.form.profile = response[0].name
        }).catch((error)=>{
            console.log(error)
        })

        this.$store.dispatch("metadata/namespace",{namespaceId:this.$route.params.id}).then((response)=>{
            this.metadatas = response
            for(let element of response) {
                if(element.profile == this.form.profile){
                    if(element.type == this.form.type){
                        this.form.source = element.source
                    }
                }
            }
        }).catch((error)=>{
            console.log(error)
        })

    },
    methods: {
        onCodeChange(newCode) {
            this.form.source = newCode
        },
        onProfileChange(item){
            var e;
            for(let element of this.metadatas) {
                if(element.profile == item){
                    if(element.type == this.form.type){
                        e = element;
                    }
                }
            }
            if (e) {
                this.form.source = e.source
            }else{
                this.form.source = ''
            }
        },
        onTypeChange(item){
            if(item === 'yml'){
                this.cmOptions.mode = "text/x-yaml";
                this.PROPERTIES = this.form.source;
                this.form.source = this.YML;
            }else{
                this.cmOptions.mode = "text/x-properties";
                this.YML = this.form.source;
                this.form.source = this.PROPERTIES;
            }
        },
        onBackClick(){
            this.$router.go(-1);
        },
        onSubmitClick(){
            this.$store.dispatch('metadata/save', this.form).then((response)=>{
               console.log(response)
            }).catch((error)=>{
                console.log(error)
            })
        }
    },
    data(){
      return {
        metadatas:[],
        namespace:{},
        isIndeterminate: false,
        YML: '',
        PROPERTIES: '',
        form: {
          namespaceId: '',
          source: '',
          profile: '',
          type: 'yml'
        },
        profiles:[{
          id: 1,
          name:'DEV'
        },{
          id: 2,
          name:'TEST'
        }],
        cmOptions:{
            tabSize: 2,
            value:'',
            mode:"text/x-yaml",
            theme: "ambiance",
            addModeClass: false,
            lineNumbers: true,
            line: true
        },
        formLabelWidth: '120px',
      };
    }
  }
</script>